@charset "utf-8";

@import "header";

.banner{
    margin-top: 50px;
    width: 100%;
    background: #2b80d9;
}

.LayaFlash_bgcolor{
    background:#fbfaf8;
    min-height: 640px;
}

.LayaFlash_bgimg{
    padding-bottom: 65px;
    background:url(../img/LayaFlash.png) no-repeat 100% 100%;
    border-bottom: 1px solid #f7f6f7;   
}
/*上面标题*/
.LayaFlash{
    padding-top: 80px;
    .Flash{
        padding: 0;
        .page_header{
            font-size: r(48px);
            color: #0078d7;
            margin-bottom: 40px;
            font-weight: 700;
        }
        .summary{
            font-size: r(30px);
            color: #757575;
            margin-bottom: 40px;
        }
    }
}

.flash_item{
    font-size: 0;
    margin-bottom: 47px;
    .flash_icon{
    transition: all .5s linear;
    margin-left: 13px;
    border-radius: 5px;
    width: 64px;
    height:64px; 
    background-color: #0078d7;
    display: block;
    }

    &:first-of-type .flash_icon{
        background:#0078d7 url("../img/flash(1).png") no-repeat center center;
            &:hover{
                background-color: gray;
                transform: rotate(360deg);  
            }
    }
    &:nth-of-type(2) .flash_icon{
        background:#0078d7 url("../img/flash(2).png") no-repeat center center;
         &:hover{
                background-color: gray;
                transform: rotate(360deg);  
            }
    }
    &:nth-of-type(3) .flash_icon{
        background:#0078d7 url("../img/flash(3).png") no-repeat center center;
         &:hover{
                background-color: gray;
                transform: rotate(360deg);  
            }
    }
    &:nth-of-type(4) .flash_icon{
        background:#0078d7 url("../img/flash(4).png") no-repeat center center;
         &:hover{
                background-color: gray;
                transform: rotate(360deg);  
            }
    }
    h3{
        font-size: 19px;
        font-weight: 500;
        margin-bottom: 7px;
    }
    p{
        font-size: 14px;
        color: #464645;
        line-height: 25px;
    }
}


/*上面标题*/

/*layabox的优点*/
    .layabox_advantage{
        background: #ffffff;
        .row{
            margin: 0;
        }
        min-height:581px
    }
    .advantage_box{
        padding:90px 0;
        .title h3{
            font-size: r(48px);
            color: #8fc31f;
            font-weight: 700;
        }
        .left_img{
            margin-top: 36px;
        }
        .advantage_content{
            margin-top: 57px;
            .item{
               .advantage_icon{
                   width: 54px;
                   height: 54px;
                   border-radius: 50%;
                   margin-bottom: 16px;
               }
               &:first-of-type .advantage_icon{
                   background:#8fc31f url("../img/advantage (1).png") no-repeat center center;
               }
               &:nth-of-type(2) .advantage_icon{
                   background:#8fc31f url("../img/advantage (2).png") no-repeat center center;
               }
               &:nth-of-type(3) .advantage_icon{
                   background:#8fc31f url("../img/advantage (3).png") no-repeat center center;
               }
               &:last-of-type .advantage_icon{
                   background:#8fc31f url("../img/advantage (4).png") no-repeat center center;
               }
            }
            p{
                margin-top: 16px;
                font-size: 14px;
                color: #736f6f;
            }
        }
        
    }
    
/*layabox的优点*/
/*layabox的产品*/
    .layabox_production{
        min-height: 905px;
        padding-top: 115px;
        background: #0079d7;
    }
    .production_title{
        font-size:r(48px);
        font-weight: 700;
        color: #FFFFFF;
    }
    .production_list{
        margin-top: 87px;
    }
    .production_icon{
        width: 150px;
        height: 96px;
    }
    .production_item{
        margin-bottom: 75px;
        &:first-of-type .production_icon{
            background: url("../img/production (1).png") no-repeat center center;
        }
        &:nth-of-type(2) .production_icon{
            background: url("../img/production (2).png") no-repeat center center;
        }
        &:nth-of-type(3) .production_icon{
            background: url("../img/production (3).png") no-repeat center center;
        }
        &:nth-of-type(4) .production_icon{
            background: url("../img/production (4).png") no-repeat center center;
        }
        &:nth-of-type(5) .production_icon{
            background: url("../img/production (5).png") no-repeat center center;
        }
        &:last-of-type .production_icon{
            background: url("../img/production (6).png") no-repeat center center;
        }
    }
    .production_content{
        min-height: 133px;
        color: #FFFFFF;
        h4{
            font-size: 32px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        p{
            font-size: 14px;
            line-height: 29px;
        }
    }
/*layabox的产品*/

/*游戏*/
.layabox_game{
    padding-top: 86px;
    padding-bottom: 50px;
    background: #FFFFFF;
}
.game_page_header{
    margin-bottom: 45px;
    h3{
        font-size: r(34px);
        font-weight: 700;
    }
    .more{
        font-size: 14px;
        text-align: right;
        a{
            color: gray;
            text-decoration: none;
        }
        
    }
}

.video_box{
    position: relative;
    border-radius:5px;
    width: 370px;
    height: 200px;
    margin-bottom: 20px;
    video{
        border-radius:5px;
        object-fit: initial;
    }
    .videoPlay_img{
        cursor: pointer;
        z-index: 6;
        position: absolute;
        top: 0;
        left: 0;
       img{
           display: block;
           border-radius: 5px;
           width: 100%;      
        }
    }
}

.game_icon{
    min-height: 130px;
    .img-responsive{
        margin: 0 auto;
    }
    p{
        margin-top: 5px;
        text-align: center;
    }
    
}


/*游戏*/
/*合作伙伴*/
.partner{
    padding-top: 47px;
    background: #f4f4f4;
    padding-bottom: 64px;
    min-height: 318px;
}

.partner_title{
    h3{
        font-size: 30px;
        position: relative;
        margin-bottom: 33px;
        &::after{
            content: "(排序不分先后)";
            position:absolute;
            top: 50%;
            font-size:12px;
        }
    }
}
.partner_list{
    padding-right: 0;
}

.partner_item{
    border-radius: 5px;
    position: relative;
    margin-bottom: 20px;
    background: #FFFFFF;
    padding: 3px;
    border: 1px solid #f0f0f0;
    img{
        width: 100%;
        height: 100%;
        display: block;
        margin: 0 auto;
    }
}
.erweima{
    width: 100%;
    background: #FFFFFF;
    position: absolute;
    top: 6px;
    left: 0;
    padding: 10px;
    padding-top: 20px;
   img{
       width: 100%;
       height: 100%;
    }
    .sjx{
        position: absolute;
        top: 98%;
        left: 50%;
        transform: translateX(-50%);
        color: #FFFFFF;
    }
}


/*合作伙伴*/

/*最小值样式*/
@media (min-width:1200px){
    .container{
        width: 1000px;
    }
}
/*最小值样式*/

/*设置缩小到一定宽度不能*/
@media (max-width:480px){
    body{
        min-width: 327px;
    }
    .partner_list{
        padding: 0 9px;
    }
    
}

@media (max-width:991px){
    .LayaFlash{
        padding-top:50px;
        .flash{
            .page_header{
                margin-bottom: 30px;
            }
            .summary{
                margin-bottom: 28px;
            }
        }
    }
    .production_icon{
        width: 114px;
        height: 96px;
        min-height: 200px;
    }
    .video_box{
         width: 300px;
         height: 270px;
         .videoPlay_img{
             width: 100%;
             height: 100%;
             img{
                 height: 100%;
             }
         }
    }   
}

@media (max-width:768px){
    .LayaFlash_bgimg{
        background:none;
    }
    html{
        font-size: 10px;
    }
    .flash_item{
        margin-bottom: 30px;
    }
    .advantage_box .advantage_content{
        margin-top: 0; 
    }
    .production_icon{
        min-height: auto;
        width: 100%;
    }
    .layabox_production{
        padding-top: 80px;
    }
    .LayaFlash{
        .Flash{
            padding-left: 15px;
        }

    }

    .partner_title{
        h3{
            text-align: center;
            &::after{
                content: "(排序不分先后)";
                position:absolute;
                top: 50%;
                font-size:12px;
            }
        }
    }
    .video_box{
         width: 100%;
    }
    .game_page_header{
        .more{
            display: none;
        }
    }
}

@media (min-width:480) and (min-width:768px){
    .video_box{
         height: 300px;
    }
}




@media (max-width:400px){
    html{
        font-size: 8px;
    }
}

/*动画*/
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollInL {
  -webkit-animation-name: rollInL;
  animation-name: rollInL;
}

@keyframes rollInL {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollInR {
  -webkit-animation-name: rollInR;
  animation-name: rollInR;
}
@keyframes rollInR {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@import "footer";
